<script lang="ts" setup>
/*
TODO
*/
import emoji from "@/emoji/emoji";
import { CommentApi, ConfigApi, SubmitParamApi, UToast } from "undraw-ui";
// 相对时间
import * as dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
defineOptions({
  name: "comment",
});
dayjs.extend(relativeTime);
const config: any = reactive<ConfigApi>({
  user: {} as any,
  emoji: emoji,
  comments: [],
  showLevel: false,
  showHomeLink: false,
  showAddress: false,
  showLikes: false,
});

const comments = [
  {
    id: "1",
    parentId: null,
    uid: "1",
    content: "等闲识得东风面，万紫千红总是春。",
    createTime: "2023-04-30 16:22",
    user: {
      username: "团团喵喵",
      avatar:
        "https://static.juzicon.com/user/avatar-23ac4bfe-ae93-4e0b-9f13-f22f22c7fc12-221001003441-Y0MB.jpeg",
      homeLink: "",
    },
    reply: {
      total: 1,
      list: [
        {
          id: "11",
          parentId: 1,
          uid: "1",
          content: "[微笑]",
          createTime: "2023-04-30 16:22",
          user: {
            username: "团团喵喵",
            avatar:
              "https://static.juzicon.com/user/avatar-23ac4bfe-ae93-4e0b-9f13-f22f22c7fc12-221001003441-Y0MB.jpeg",
          },
        },
      ],
    },
  },
  {
    id: "2",
    parentId: null,
    uid: "2",
    content: "长风破浪会有时，直挂云帆济沧海。",
    createTime: "2023-04-28 09:00",
    user: {
      username: "且美且独立",
      avatar:
        "https://static.juzicon.com/avatars/avatar-20200926115919-a45y.jpeg",
    },
  },
];

// 评论数据
setTimeout(() => {
  // 当前登录用户数据
  config.user = {
    id: 1,
    username: "jack",
    avatar:
      "https://static.juzicon.com/avatars/avatar-200602130320-HMR2.jpeg?x-oss-process=image/resize,w_100",
  };
  config.comments = comments;
}, 500);
// 评论提交事件
let temp_id = 100;
// 提交评论事件
const submit = ({ content, parentId, files, finish }: SubmitParamApi) => {
  console.log("提交评论: " + content, parentId, files);

  const comment: CommentApi = {
    id: String((temp_id += 1)),
    parentId: parentId,
    uid: config.user.id,
    content: content,
    createTime: new Date().toString(),
    user: {
      username: config.user.username,
      avatar: config.user.avatar,
    },
    reply: null,
  };
  setTimeout(() => {
    finish(comment);
    UToast({ message: "评论成功!", type: "info" });
  }, 200);
};

// 加载前评论数据处理
function beforeData(val: any) {
  val.createTime = (dayjs as any)(val.createTime).fromNow();
}
</script>
<template>
  <div>
    <u-comment :config="config" @submit="submit" @before-data="beforeData">
    </u-comment>
  </div>
</template>
<style lang="scss" scoped>
.el-dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.operation-warp {
  font-size: 16px;
  color: #9499a0;
  cursor: pointer;
  position: relative;
}
.operation-warp:hover {
  color: #00aeec;
}
</style>
